<template>
  <div class="userDevice-list">
    <el-page-header @back="goBack" >
    </el-page-header>
    <div style="height: 60px">
      <el-button type="primary" @click="deviceConfig" style="margin: 5px;float: right">配置</el-button>
    </div>
    <el-table
      stripe
      height="800"
      :data="userDeviceDataList"
      style="width: 100%"
    >
      <el-table-column
      align="center"
      label="设备名称"
      prop="device_name"
    >
    </el-table-column>
      <el-table-column
        align="center"
        label="管理点位数"
        prop="point_sum"
      >
        <template slot-scope="{row}">
          <span>{{row.point_sum}}  <a @click="goPointList(row)" style="color: blue">详情</a></span>
        </template>
      </el-table-column>
    </el-table>
    <device-config ref='device_config_dialog'/>
  </div>
</template>

<script>

  import deviceConfig from "./deviceConfigList";

  export default {
    name: "deviceList",
    components: {deviceConfig},
    methods: {
      queryData(){
        let me = this;
        this.$axios.post('userConfigRoutes', {
          action_type: 'deviceQuery',
          user_id:me.$route.params.user_id
        }).then(function (response) {
          me.userDeviceDataList = response.data.data;
        });
      },
     deviceConfig() {
        this.$refs.device_config_dialog.deviceConfigQuery();
      },
      goPointList(row){
        this.$router.push({name: 'pointList', params: {user_id: row.user_id,device_id:row.device_id,enterprise_id:this.$route.params.enterprise_id}})
      },
      goBack(){
        this.$router.push({name: 'user'})
      }
    },
    data() {
      return {
        userDeviceDataList : [],
      }
    },
    created() {
      let me = this;
      if(me.$route.params.user_id){
        me.queryData();
      }else{
        me.$router.push({name: 'userConfig'});
      }
    },

  }
</script>

<style lang="scss" scoped>
  .userDevice-list {
    background-color: #fff;
  }
  a:hover{cursor:pointer}
</style>
